<template>
    <div>
        <table class="table">
            <tbody class="table">
                <tr>
                    <td>项目名称</td>
                    <td>
                        <input type="text" v-model="can.name">
                    </td>
                    <td>
                        <input type="button" value="查询" @click="tiao">
                        <input type="button" value="批量修改状态" @click="updsta">
                        <input type="button" value="添加康复理疗信息" @click="Add">
                        <a href="https://localhost:7220/api/Recover/UpdownExcel">导出列表</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="button" value="添加食谱" @click="Adds">
                        <input type="button" value="食谱列表" @click="Added">
                    </td>
                </tr>
            </tbody>
        </table>
        <table class="table">
            <thead class="table">
                <tr>
                    <td>
                        <input type="checkbox" v-model="isYN" @change="allsel">
                    </td>
                    <td>项目编号</td>
                    <td>项目名称</td>
                    <td>服务时长</td>
                    <td>服务人数</td>
                    <td>状态</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody class="table">
                <tr v-for="a in data">
                    <td>
                        <input type="checkbox" v-model="idstring" :value="a.rid" @change="backsel">
                    </td>
                    <td>{{a.rnum}}</td>
                    <td>{{a.rname}}</td>
                    <td>{{a.service}}</td>
                    <td>{{a.peopleNum}}</td>
                    <td>{{a.isStatus?"启用":"禁用"}}</td>
                    <td>
                        <input type="button" value="删除"  @click="del(a.rid)">
                    </td>
                </tr>
            </tbody>
        </table>
        <input type="button" value="首页" @click="skip(1)">
        <input type="button" value="上页" @click="skip(2)">
        <input type="button" value="下页" @click="skip(3)">
        <input type="button" value="尾页" @click="skip(4)">
        一共{{can.totalpage }}页，一共{{can.listcount}}条，每页{{can.pagesize}}条，当前{{can.pageindex}}页
        <select v-model="can.pagesize" @change="tiao">
            <option :value="2">2</option>
            <option :value="3">3</option>
            <option :value="4">4</option>
            <option :value="5">5</option>
        </select>
        <input type="text" v-model="can.pageindex">
        <input type="button" value="跳转" @click="page">
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref,onMounted } from 'vue';
import { useRouter } from 'vue-router';


onMounted(() => {
    show();
})
const can=ref({
    name:'',
    pageindex:1,
    pagesize:2,
    listcount:0,
    totalpage:0
})

const data=ref([
    {
        "rid": 0,
      "rnum": "",
      "rname": "",
      "service": 0,
      "peopleNum": 0,
      "isStatus": true,
      "isDel": true
    }
])

const show=()=>{
    axios.get("https://localhost:7220/api/Recover/GetRecoveryList",{params:can.value}).then(res=>{
        data.value=res.data.row;
        can.value.listcount=res.data.count;
        can.value.totalpage=Math.ceil(res.data.count/can.value.pagesize);
    })
}
//改变页容
const tiao=()=>{
    can.value.pageindex=1;
    show();
}

//翻页
const skip=(n:number)=>{
    if(n==1){
        can.value.pageindex=1;
        show();
    }
    if(n==2){
        if(can.value.pageindex>1){
            can.value.pageindex-=1;
            show();
        }else{
            alert("超出页码范围");
        }
    }
    if(n==3){
        if(can.value.pageindex<can.value.totalpage){
            can.value.pageindex+=1;
            show();
        }else{
            alert("超出页码范围");
        }
    }
    if(n==4){
        can.value.pageindex=can.value.totalpage;
        show();
    }
}

//跳转
const page=()=>{
    if(can.value.pageindex>can.value.totalpage){
        alert("超出最大页吗，返回尾页");
        can.value.pageindex=can.value.totalpage;
        show();
    }
    if(can.value.pageindex*0!=0){
        alert("只能输入数字");
        can.value.pageindex=1;
        show();
    }
    show();
}

//删除（逻辑）
const del=(s:number)=>{
    if(!confirm("确认删除吗？")){
        return;
    }
    axios.delete("https://localhost:7220/api/Recover/RemoveRecovery",{params:{id:s}}).then(res=>{
        if(res.data>0){
            alert("删除成功");
            show();
        }else{
            alert("删除失败");
        }
    })
}
//定义数组型模型
const idstring=ref<number[]>([])
//定义布尔型模型
const isYN=ref(false);

//全选/全取消
const allsel=()=>{
    if(isYN.value){
        data.value.forEach(s=>{
            idstring.value.push(s.rid);
        })
    }else{
        idstring.value=[];
    }
}
//反选
const backsel=()=>{
    if(data.value.length==idstring.value.length){
        isYN.value=true;
    }else{
        isYN.value=false;
    }
}
//批量修改状态
const updsta=()=>{
    if(idstring.value.toString()==""){
        alert("至少选中一项");
        return;
    }
    var d=idstring.value.toString();
    axios.get("https://localhost:7220/api/Recover/RangeUpdateSta",{params:{idstring:d}}).then(res=>{
        if(res.data>0){
            alert("修改成功");
            show();
        }else{
            alert("修改失败");
        }
    })
}

const router=useRouter();
const Add=()=>{
    router.push({
        path:'/ReAddView'
    })
}
const Adds=()=>{
    router.push({
        path:'/AddView'
    })
}

const Added=()=>{
    router.push({
        path:'/ShowView'
    })
}
</script>

<style scoped>

</style>